<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%@ taglib uri="http://www.springframework.org/tags" prefix="spring"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8" isELIgnored="false"%>
<%@ taglib prefix="sec"
	uri="http://www.springframework.org/security/tags"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title><sitemesh:write property='title' /></title>
<link rel="stylesheet"
	href="<spring:theme code="theme.online.css"/>/style.css?time=@time_param@" />
<link rel="stylesheet"
	href="<spring:theme code="theme.online.css"/>/jquery-ui.css?time=@time_param@" />
<link rel="stylesheet"
	href="<spring:theme code="theme.online.css"/>/gallery.css?time=@time_param@" />
<link rel="stylesheet"
	href="<spring:theme code="theme.default.css"/>/style_web.css?time=@time_param@" />

<script src="<spring:theme code="theme.online.js"/>/nganluong.apps.mcflow.js" type="text/javascript"></script>

<script type="text/javascript">
	var URL_PATH = "<%=request.getContextPath()%>";
	
</script>
<script
	src="<spring:theme code="theme.default.js"/>/libs/jquery-1.8.3.js?time=@time_param@"
	type="text/javascript"></script>
<script
	src="<spring:theme code="theme.default.js"/>/libs/numeral.js?time=@time_param@"
	type="text/javascript"></script>
<script
	src="<spring:theme code="theme.online.js"/>/jquery-ui.js?time=@time_param@"
	type="text/javascript"></script>
<script
	src="<spring:theme code="theme.online.js"/>/modernizr.custom.53451.js?time=@time_param@"
	type="text/javascript"></script>
<script
	src="<spring:theme code="theme.online.js"/>/jquery.gallery.js?time=@time_param@"
	type="text/javascript"></script>
<script
	src="<spring:theme code="theme.online.js"/>/main.js?time=@time_param@"
	type="text/javascript"></script>
<script type="text/javascript">
		var isAuthenticated = false;
	</script>
<c:set var="isAuthenticated" value="false" scope="request" />
<sec:authorize  ifAnyGranted="ROLE_CUSTOM">
	<c:set var="isAuthenticated" value="true" scope="request" />
	<script type="text/javascript">
		var isAuthenticated = true;
	</script>
</sec:authorize>
<sitemesh:write property='head' />

</head>
<body>
	<div class="page">
		<div class="header">
			<div style="height: 110px;">
				<div class="logo-head">COMPANY LOGO</div>
				<div class="logo-head-slogan"></div>
			</div>
			<div class="nav-bar">
				<div class="nav-item" onclick="window.location.href='home';">
					<i class="icon ic-home"></i>Trang chủ
				</div>
				<div class="nav-item">
					<span><i class="icon ic-category"></i>Thể loại</span>
					<div class="nav-group" id="categoryBook">
					</div>
				</div>
				<div class="nav-item">
					<span><i class="icon ic-audio"></i>Audio book</span>
					<!-- <div class="nav-group">
						<div class="nav-sub-item">Mutationem</div>
						<div class="nav-sub-item">Consuetudium</div>
						<div class="nav-sub-item">Lectorum</div>
					</div> -->
				</div>
				<c:choose>
					<c:when test="${isAuthenticated}">
						<div id="" class="nav-item">
							<i class="icon ic-account"></i>Tài khoản
							<div class="nav-group">
								<div class="nav-sub-item" onclick="viewCustomerProfile();">Thông tin cá nhân</div>
								<div class="nav-sub-item" onclick="logout();">Thoát</div>
							</div>
						</div>
					</c:when>
					<c:otherwise>
						<div id="btn-account" class="nav-item">
							<i class="icon ic-account"></i>Đăng nhập
						</div>
					</c:otherwise>
				</c:choose>
				<div class="nav-item"><i class="icon ic-account"></i>Trợ giúp</div>
				<div class="nav-search">
					<form action="searchBooks" method="POST" id="search-book-form">
					<input type="text" class="nav-search-input" id="search-book-textbox"  name="keyword"
						placeholder="Tìm sách" /> <a class="nav-search-btn" onclick="submitForm();">Tìm</a>
					</form>
				</div>
			</div>
		</div>
		<div class="content">
			<div class="gallery">
				<section id="knw_continer" class="knw_continer">
					<div class="dg-wrapper" id="bannerTop"></div>
					<nav>
						<span class="dg-prev">&lt;</span> <span class="dg-next">&gt;</span>
					</nav>
				</section>
			</div>

			<sitemesh:write property='body' />

			<div class="banner-view">
				<a class="banner-btn left"></a> <a class="banner-btn right"></a>
				<ul class="pr-list list-banner" id="list3">
				</ul>
			</div>


		</div>
		<div class="footer">
			<ul class="footer-nav">
				<li class="footer-nav-item accountInfo"><i
					class="footer-nav-icon ic-account"></i><span>Tài khoản</span></li>
				<li class="footer-nav-item"><i class="footer-nav-icon ic-ship"></i><span>Đã
						mua</span></li>
				<li class="footer-nav-item mobi-card"><i class="footer-nav-icon ic-pig"></i><span>Nạp
						tiền</span></li>
				<li class="footer-nav-item"><i class="footer-nav-icon ic-game"></i><span>Trò
						chơi</span></li>
			</ul>
			<div class="footer-info">Bản quyền thuộc về nhà xuất bản thời đại</div>
		</div>
		<form action="home/login_security_check" id="formLoginId" method="post"
			name="account">
			<div class="popup disable">
				<div class="popup-mask"></div>
				<div class="popup-login" id="popup-login">
					<div class="popup-decorate">
						<div class="popup-deco-back"></div>
						<div class="popup-deco-front"></div>
					</div>
					<div class="popup-content">
						<div class="popup-title">Login</div>
						<div class="popup-row">
							<span class="popup-label">Username</span> <input type="text"
								class="popup-input" name="username" />
						</div>
						<div class="popup-row">
							<span class="popup-label">Password</span> <input type="password"
								class="popup-input" name="password" />
						</div>
						<div class="popup-control">
							<input type="button" class="popup-button" onclick="loginCheck();" value="Login" id="loginButton">
						</div>
						<div class="popup-row">
							<p class="errorLogin"></p>
						</div>
						<div class="popup-control">
							<a class="popup-link" href="register-account"><i class="popup-link-bullet"></i>Đăng ký tài khoản mới</a>
						</div>
					</div>

				</div>
		</form>
	</div>
	</div>
	<script type="text/javascript">
		$(document).ready(function(){
			var root = "<%request.getContextPath();%>";
			$.ajax({
				url: root+"ajax/getBookCategory",
				type: "GET",
				success: function(data){
					$("#categoryBook").html(data);
				}
			});
			$.ajax({
				url: root+"ajax/getBannerTop",
				type: "GET",
				success: function(data){
					$("#bannerTop").html(data);
					$('#knw_continer').gallery({autoplay: true, interval: 5000});
				}
			});
			$.ajax({
				url: root+"ajax/getAdvertising",
				type: "GET",
				success: function(data){
					$("#list3").html(data);
				}
			});
			$('#search-book-textbox').bind("keypress", function(event){
				if (event.keyCode == 13) {
					$('#search-book-form').submit();
				}
			});
			
			$(".accountInfo").click(function(){
				if(isAuthenticated){
					viewCustomerProfile();
				} else{
					showPopup("popup-login",null);
				}
			});
			$(".mobi-card").click(function(){
				if(isAuthenticated) {
					window.location.href = 'nap-tien';
				} else {
					showPopup("popup-login",null);
				}
			});
			
			$("#search-book-textbox").focus(function(){
				$("#search-book-textbox").removeAttr("placeholder");
			});
			$("#search-book-textbox").blur(function(){
				if($(this).val() == ""){
					$("#search-book-textbox").attr("placeholder", "Tìm sách");
				}
			}); 
		});
		function submitForm(){
			$('#search-book-form').submit();
		}
	</script>
</body>
</html>